<template>
<div>
     <x-header style="position:fixed;top:0px;width:100%;z-index:1000;background:;">确认订单</x-header>
    
    <div class="wraps_">
       
        <div class="user_address" v-if="ishasAddress" @click="address_list"> 
            <div class="position"><img src="static/bottom/dizhi@2x.png" alt=""></div>
            <div class="address_detail">
                <p>收货人：{{addressData.username}} <span>{{addressData.tel}}</span></p>
               <p> 收货地址：{{addressData.address}}</p>
            </div>
            <div class="more_list"><img class="" src="static/cart/yjt@2x.png" alt=""></div>                        
        </div>
         <div class="choose_address" v-else @click="address_list">
             <div>选择收货地址<img class="imgds" src="static/dizhi@2x/dizhi@2x.png" alt=""></div>
        </div>
    </div>
     <div class="orderClass" >
         <!-- <keep-alive include="ShopCell"> -->
             <!-- <shop-cell :list="list"></shop-cell> -->
         <div class="confirmWrap" v-for="(item,index) in comfirGoodsInfo" :key="index">
             <div class="shopsName">{{item.shopname}}</div>
              <div class="order_info">
                    <div class="order_img"><img :src="item.goodsimage" alt=""></div>
                    <div class="order_text">
                        <p><span class="color">{{item.goodsname}}</span></p>
                        <p>{{item.params1}},{{item.params2}}</p>
                    </div>
                    <div class="order_cost">
                        <p>￥{{item.goodsprice}}</p>
                        <p>{{item.freightPrice}}</p>
                        <p>×{{item.number}}</p>
                    </div>            
                </div>
         </div>
          </div>
         <!-- </keep-alive> -->
      
          <!-- 订单明细 -->
          <div class="informations">
          <div class="">
               <group>
                <cell :title="('使用优惠券')" value="优惠券" is-link @click.native="youhuiPopup=true"></cell>
                </group>
                  <div v-transfer-dom>
                <popup v-model="youhuiPopup" class="checker-popup" height="60%">
                        <ticket-page></ticket-page>
                </popup>
                </div>
          </div>
          <!-- 选择配送方式 -->
              <div class="">
              <group>
                <cell :title="('选择配送方式')" :value="sendType" is-link @click.native="sendTypePopup=true"></cell>
                </group>
                <div v-transfer-dom>
                <popup v-model="sendTypePopup" class="checker-popup">
                    <div style="padding:10px 10px 40px 10px;">
                    <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
                    <checker
                    v-model="sendType"
                    default-item-class="demo4-item"
                    selected-item-class="demo4-item-selected"
                    disabled-item-class="demo4-item-disabled">
                        <checker-item @on-item-click="onItemClicks" :value="item.value" v-for="(item, index) in items1" :key="index"> {{item.value}} </checker-item>
                    </checker>
                    </div>
                </popup>
                </div>
            <div>
          </div>
          <div>
          </div>
          <!-- 弹起 -->
        </div>
          <!-- <div class="sendType">
            <div class=" infoItemexpress">
                <div class="infoIcon"><img src="static/bottom/express.png" width="42" alt=""></div>
                <div class="infoTitles">选择配送方式</div>
            </div>
            <div>
                <checker v-model="checkers" type="radio" default-item-class="demo6-item" selected-item-class="demo6-item-selected">
                    <checker-item @on-item-click="onItemClick" :value="item" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>
                </checker>
            </div>
            <p>
                自提点：嘉福祥商城线下体验店-润东电器 <span style="color:#E60012">修改</span>
            </p>
            <p>您可以选择离您最近的自提点上门提货；免邮</p>
          </div> -->
          <!-- 开发票 -->
         
           <div>
              <group>
                <cell :title="('开发票')" :value="demo4" is-link @click.native="showPopup=true"></cell>
                </group>
                <div v-transfer-dom>
                <popup v-model="showPopup" class="checker-popup" height="60%">
                    <div style="padding:10px 10px 40px 10px;">
                    <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
                    <checker
                    v-model="demo4"
                    default-item-class="demo4-item"
                    selected-item-class="demo4-item-selected"
                    disabled-item-class="demo4-item-disabled">
                        <checker-item @on-item-click="onItemClicktick" :value="item.value" v-for="(item, index) in commontype" :key="index"> {{item.value}} </checker-item>
                    </checker>
                    </div>
                </popup>
                </div>
            <div>
          </div>
          <div>
          </div>
        </div>
        <!-- 送货时间 -->
        <div>
              <group>
                <cell :title="('送货时间')" :value="demo5" is-link @click.native="demo5Popup=true"></cell>
                </group>
                <div v-transfer-dom>
                <popup v-model="demo5Popup" class="checker-popup" height="60%">
                    <div style="padding:10px 10px 40px 10px;">
                    <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
                    <checker
                    v-model="demo5"
                    default-item-class="demo4-item"
                    selected-item-class="demo4-item-selected"
                    disabled-item-class="demo4-item-disabled">
                        <checker-item @on-item-click="onItemClickdemo5" :value="item" v-for="(item, index) in commonList" :key="index"> {{item}} </checker-item>
                    </checker>
                    </div>
                </popup>
                </div>
            <div>
          </div>
          <div>
          </div>
        </div>
          <!-- <div class="sendTime">
               <div class="infoItem">
                    <div class="infoTitles  marginDiv" @click="showTime">送货时间</div>
                    <div class="infosmore" @click="showTime"><img src="static/cart/arrow-down.png" alt=""></div>
                </div>
                <div v-show="timeshow">
                   <checklist style="flex:1" title="" :options="commonList" v-model="radioValue" :max="1" @on-change="sendTimes"></checklist>
                    
                </div>
          </div> -->
          <!-- 缺货处理 -->
           <div>
              <group>
                <cell :title="('缺货处理')" :value="demo10" is-link @click.native="demo10Popup=true"></cell>
                </group>
                <div v-transfer-dom>
                <popup v-model="demo10Popup" class="checker-popup" height="60%">
                    <div style="padding:10px 10px 40px 10px;">
                    <p style="padding: 5px 5px 5px 2px;color:#888;">Colors</p>
                    <checker
                    v-model="demo10"
                    default-item-class="demo4-item"
                    selected-item-class="demo4-item-selected"
                    disabled-item-class="demo4-item-disabled">
                        <checker-item @on-item-click="onItemClickdemo10" :value="item" v-for="(item, index) in commonLists" :key="index"> {{item}} </checker-item>
                    </checker>
                    </div>
                </popup>
                </div>
            <div>
          </div>
          <div>
          </div>
        </div>
          <!-- <div>
             <div class="infoItem">
            
                <div class="infoTitles marginDiv"  @click="lostGoods">缺货处理</div>
                <div class="infosmore" @click="lostGoods"><img src="static/cart/arrow-down.png" alt=""></div>
            </div> 
            <div v-show="lostgoodsShow">
                   <checklist style="flex:1" title="" :options="commonLists" v-model="radioValues" :max="1" @on-change="lostGoods"></checklist>                
            </div>
          </div> -->
          
          <div class="">
               <x-input label-width="5em" title='订单备注' placeholder="买家留言（非必填）"></x-input>
          </div>
          <div style="background:#F4F8FB;height:10px"></div>
           <!-- 支付 -->
            <!-- <div class="infoItem payway">
                <div class="infoIcons">
                <check-icon :value.sync="demo2" type="plain"></check-icon>
                    
                </div>
                
                <div class="infoTitles marginDiv">使用账户余额支付</div>
            </div>   -->
             <div style="background:#F4F8FB;height:10px"></div>
            
            <div class="payInfos">
                <div class="paygetbug">*该订单完成后，您将获得0.00的红包</div>
                <div>
                    <p>商品总价：￥{{goodsMonery}}</p>
                    <p>应付款金额： <span>￥{{goodsMonery}}</span></p>
                </div>
            </div>
             <div style="background:#F4F8FB;height:10px"></div>
                <!-- 微信支付 -->
                <!-- <div class="aboutWx">
                     <div class="infoItem">
                        <div class="infoIcons"><img src="static/cart/wxicon.png" alt=""></div>
                        <div class="infoTitles  marginDiv">支付方式</div>
                        <div class="mustchoose" ><div class="">必选</div></div>
                    </div>
                </div>
                 <div class="infoItem">
                     <div class="infoIcons">
                <check-icon :value.sync="wxpayment" type="plain"></check-icon>
                    
                </div>
                    <div class="infoTitles marginDiv"  @click="lostGoods">微信支付</div>
               
                </div>  -->
          </div>
          
      <!-- </div> -->
     
      <!-- 发票弹框 -->
       <div v-transfer-dom >
      <x-dialog v-model="show" class="dialog-demo">
          <div class="faTypea">
               <div>
                   <p>选择发票类型</p>
                     <checker v-model="values1" type="radio" default-item-class="demo6-item" selected-item-class="demo6-item-selected">
                        <checker-item @on-item-click="onItemClick" :value="item" v-for="(item, index) in commontype" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
                <div style="border-top:1px solid #ebebeb">
                    <p>选择发票内容</p>
                     <checker v-model="values2" type="radio" default-item-class="demo6-item" selected-item-class="demo6-item-selected">
                        <checker-item @on-item-click="onItemClick" :value="item" v-for="(item, index) in commoncontent" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
                <div class="isOk" @click="isOk">确定</div>
         </div>
      </x-dialog>
    </div>
    <!--  -->
    
      <!-- 确认订单 -->
      <div class="confirms">
          <!-- <p>共1件，实付: <span class="change">￥978.00</span> </p> -->
          <div @click="pay_money">提交订单</div>
      </div>
     
</div>

</template>

<script>
import {
  Scroller,
  Checklist,
  CheckIcon,
  XSwitch,
  Checker,
  CheckerItem,
  Group,
  XInput,
  XHeader,
  Divider,
  Popup,
  Spinner,
  XButton,
  Cell,
  LoadMore,
  XDialog,
  TransferDomDirective as TransferDom
} from "vux";
import ShopCell from "../../components/toolComponent/shopCell.vue";
import ticketPage from "../../components/toolComponent/ticketPage";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";
export default {
  name: "order_confirm",
  directives: {
    TransferDom
  },
  components: {
    Scroller,
    Divider,
    Spinner,
    XButton,
    Group,
    Cell,
    XInput,
    LoadMore,
    XHeader,
    Checker,
    CheckerItem,
    XSwitch,
    CheckIcon,
    Checklist,
    XDialog,
    ShopCell,
    Popup,
    ticketPage
  },
  data() {
    return {
      checkers: [{ key: "1", value: "门店自取" }],
      values1: [{ key: "1", value: "明细" }],
      values2: [{ key: "1", value: "普通发票" }],
      sendType: "门店自取",
      items1: [
        {
          key: "1",
          value: "门店自取"
        },
        {
          key: "2",
          value: "同城快递"
        },
        {
          key: "3",
          value: "普通快递"
        }
      ],
      stringValue: "0",
      demo2: false,
      wxpayment:true,
      commonList: ["仅工作日送货", "仅周末送货", "工作日/周末/假日均可", "指定送货时间"],
      radioValue: ["仅工作日送货"],
      isShow: false,
      commonLists: ["等待所有商品备齐后再发", "取消订单", "与店主协商"],
      radioValues: ["等待所有商品备齐后再发"],
      lostgoodsShow: false,
      demo5:"工作日/周末/假日均可",
      demo10:"等待所有商品备齐后再发",
      demo10Popup:false,
      timeshow: false,
      showPopup: false,
      sendTypePopup: false,
      demo5Popup:false,
      ishasAddress:true,
      addressList:[] , 
      demo4: "无",
      youhui:"无",
      commontype: [
        {
          key: "1",
          value: "普通发票"
        },
        {
          key: "2",
          value: "增值税发票"
        }
      ],
      commoncontent: [
        {
          key: "1",
          value: "明细"
        },
        {
          key: "2",
          value: "办公用品"
        },
        {
          key: "3",
          value: "电脑配件"
        },
        {
          key: "4",
          value: "耗材"
        },
        {
          key: "5",
          value: "其他"
        }
      ],
      show: false,
      list: [],
      // params: {
      //       comfirGoodsInfo: parmamsArr,
      //       goodsMonery: this.$data.totalPrice
      //     }
      comfirGoodsInfo: this.$route.params.comfirGoodsInfo,
      addressInfo: this.$route.params.addressInfo,
      goodsMonery:this.$route.params.goodsMonery,
      youhuiPopup: false,
      addressData:"",
      sendsTimes:"",
      lostshops:"",
      wxOpenId:localStorage.getItem("openid"),
    };
  },
  methods: {
   
    address_list() {
      this.$router.push({ name: "goods_address", params: {} });
    },
    onItemClickdemo5(value, disabled) {
         console.log(value, disabled);
      if (!this.disabled) {
        this.demo5Popup = false;
      }
    },
     onItemClickdemo10(value, disabled) {
         console.log(value, disabled);
      if (!this.disabled) {
        this.demo10Popup = false;
      }
    },
    onItemClicktick(value, disabled) {
      console.log(value, disabled);
      if (!this.disabled) {
        this.showPopup = false;
      }
    },
    onItemClicks(value, disabled) {
      console.log(value, disabled);
      if (!this.disabled) {
        this.sendTypePopup = false;
      }
    },
    onItemClick(){

    },
    onClick(currentValue) {
      console.log(currentValue);
      if (currentValue == 1) {
        this.show = true;
      } else if (currentValue == 0) {
        this.show = false;
      }
    },
    // 送货时间
    sendTimes(val, label) {
      console.log("送货时间", val, label);
      this.sendsTimes=val;
    },
    // 缺货处理
    lostGoods(val, label) {
      console.log("缺货处理", val, label);
      this.lostshops=val;
      
    },
    
    showTime: function() {
      this.timeshow = !this.timeshow;
    },
    lostGoods: function() {
      this.lostgoodsShow = !this.lostgoodsShow;
    },
    openPay: function() {
      this.$router.push({ name: "myInvoice", params: {} });
    },
    isOk() {
      console.log("kkkk");
      this.show = false;
    },
    goodsInfo() {
      console.log("pppppppppppppp")
      // console.log(this.goodsInfo)
      console.log(this.comfirGoodsInfo);
      var datasList = this.comfirGoodsInfo;
      var listdata = [];

      for (var i = 0; i < datasList.length; i++) {
        var obj = {};
        obj.src = "static/cart/redpack.png";
        (obj.title =
          "<p><span>" +
          datasList[i].title +
          '</span><span style="float:right;color:#cc0010;font-size:18px">￥' +
          datasList[i].money +
          "</span></p>"),
          (obj.desc =
            '<p style="line-height:20px">' +
            datasList[i].description +
            "</p><p>" +
            datasList[i].starttime +
            "-" +
            datasList[i].endtime +
            "</p>");

        // console.log(obj)
        listdata.push(obj);
      }
      console.log(listdata);
      this.list = listdata;
    },
     //   提交订单
    pay_money() {
        console.log(this.addressData);
        console.log("88888")
        console.log(this.comfirGoodsInfo);
        console.log(JSON.stringify(this.comfirGoodsInfo))
        console.log(this.sendType);
        console.log(this.demo4); 
        console.log(this.demo5);
        console.log(this.demo10);
             var goodsOrder=[];  
            //  var randomNum=Math.random()*10;    
        for(var i in this.comfirGoodsInfo){
          console.log(this.comfirGoodsInfo[i])
              var goodsEachOrder={};
            
              goodsEachOrder.goodsId=this.comfirGoodsInfo[i].goodsid;
             
              goodsEachOrder.goodsNumber=this.comfirGoodsInfo[i].number;
             goodsEachOrder.goodsMonery=this.goodsMonery
              goodsOrder.push(goodsEachOrder)
        }
//  console.log("ppppp")
// console.log(goodsOrder)
     var datas = qs.stringify({
        // goodsOrders:JSON.stringify(goodsOrder),
               wxid:"oCBm3vxlqwJjUbBDshKiQ50IFSjs",
             status:"未支付",
             goodsIdArr:JSON.stringify(goodsOrder),
              transportMethod:this.sendType,
              invoiceType:this.demo4,
              invoiceContent:"其他",
              deliveryTime:this.demo5,
             noGoodsMethod:this.demo10,
             sendCompany:"中通",
             addressId:this.addressData.addid,
      });
      axios
        .post(homeUrl() + "ordertableManageJsonAdd/", datas, { emulateJSON: false })
        .then(
          result => {
            console.log(result);
           if(result.data.status=="ok"){
             console.log("...........99999.....")
        console.log(goodsOrder);
             
            this.$router.push({ name: "pay_money", params: {shopsData:goodsOrder} });
             
           }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
        
    },
    isHasAddress(){
      var that = this
      var datas = qs.stringify({
        wxid: "oCBm3vxlqwJjUbBDshKiQ50IFSjs"
      });
      axios.post(homeUrl() + "findAddress/", datas, { emulateJSON: true }).then(
        result => {
          if (result.status == 200) {
            console.log(result)
            if(result.data.length <= 0){
              that.$data.ishasAddress=false
            }else{
              that.$data.addressList = result.data;
              for(var i=0;i<result.data.length;i++){
                that.$data.ishasAddress=true
                if(result.data[i].flag=="true"){
                  that.$data.addressData=result.data[i]
                }
              }
            }
           
          }

          console.log("ppppppppp")
          console.log(that.$data.addressData)
        },
        error => {
          that.$vux.toast.text("网络请求失败....", "bottom");
        }
      );
    }
  },
  created() {
    // this.goodsInfo();
  // 判断用户是否有默认地址
    // this.isHasAddress();
    // var value = wiondow.localStorage.getItem("value");
  },

  activated: function() {
    // this.data = '';
    console.log("打开界面");
      
    this.$data.comfirGoodsInfo=this.$route.params.comfirGoodsInfo;
    this.$data.goodsMonery=this.$route.params.goodsMonery

    if(this.$data.comfirGoodsInfo == undefined || this.$data.comfirGoodsInfo == "") {
      this.$data.comfirGoodsInfo = JSON.parse(localStorage.getItem("comfirGoodsInfo"))
      this.$data.goodsMonery = localStorage.getItem("goodsMonery")
    } else {
       localStorage.setItem("comfirGoodsInfo" , JSON.stringify(this.$data.comfirGoodsInfo))
       localStorage.setItem("goodsMonery" , this.$data.goodsMonery)
    }

    this.isHasAddress()


    // this.$destroy()
  },
  deactivated: function() {
    console.log("关闭界面");
  }
};
</script>
<style>
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.shopsName {
  height: 2.8125rem;
  line-height: 2.8125rem;
  background: #ffffff;
  border-bottom: 1px solid #ebebeb;
  padding-left: 0.625rem;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display: inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.choose_address {
  margin-top: 2.875rem;
  background: #ffffff;
  height: 3.75rem;
  margin-bottom: 0.625rem;
  text-align: center;
  line-height: 3.75rem;
  position: relative;
  font-size: 0.875rem;
}
.wraps_ {
  width: 100%;
  background: #ffffff;
}

.user_address {
  margin-top: 3.75rem;
  display: flex;
  margin-bottom: 0.625rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.875rem;
}
.position {
  width: 3.125rem;
  padding-top: 1.25rem;
}
.position img {
  width: 1.875rem;
  height: 1.875rem;
}
.more_list {
  width: 3.125rem;
  text-align: right;
  padding-top: 1.35rem;
}
.more_list img {
  width: 0.9375rem;
  height: 1.25rem;
}
.orderClass {
  width: 100%;
  background: #ffffff;
  /* margin-bottom: 70px */
}
.order_info {
  display: flex;
  height: 5.625rem;
  border-bottom: 1px solid #ebebeb;
  padding-top: 0.625rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  color: #333333;
  font-size: 14px;
}
.order_img img {
  width: 6.625rem;
  height: 4.75rem;
  padding-right: 0.3125rem;
}
.imgds {
  width: 0.9375rem;
  height: 1.25rem;
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}
.order_cost {
  width: 5rem;
  text-align: right;
}
.order_text {
  flex: 1;
}
.color {
  color: #e60012;
  padding-right: 0.5rem;
}
.order_text p:nth-child(2) {
  font-size: 0.75rem;
  color: #666666;
}
.order_cost p:nth-child(1) {
  font-size: 0.875rem;
}
.order_cost p:nth-child(2) {
  font-size: 0.75rem;
  color: #666666;
}
.order_cost p:nth-child(3) {
  font-size: 0.75rem;
  color: #666666;
}
.shop_total {
  height: 3.0625rem;
  line-height: 2.8125rem;
  font-size: 0.875rem;
  color: #333333;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.marginDiv {
  margin-left: 1rem;
}
.shop_total span:nth-child(2) {
  float: right;
}
.confirms {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #ebebeb;
}
.confirms div {
  width: 100%;
  height: 2.875rem;
  background: #e60012;
  color: #ffffff;
  font-size: 0.9375rem;
  line-height: 2.875rem;
}
.change {
  color: #e60012;
}
.infoItem {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #ececec;
}
.infoItemexpress {
  display: flex;
  height: 50px;
  /* border-bottom: 1px solid #ececec; */
}
.infoIcons {
  width: 30px;
  padding-right: 8px;
  /* padding-left: 10px; */
  text-align: center;
  padding-top: 10px;
}
.informations {
  background: #ffffff;
  margin-bottom: 100px;
}
.infoIcon {
  width: 60px;
  padding-right: 8px;
  /* padding-left: 10px; */
  text-align: center;
  /* padding-top: 10px */
}
.infoIcons img {
  width: 40px;
  /* height: 40px; */
}
.infoTitles {
  line-height: 50px;
  flex: 1;
}
.infosmore {
  flex: 1;
  text-align: right;
  line-height: 3.75rem;
  padding-right: 0.625rem;
}
.infosmore img {
  width: 0.9375rem;
  height: 1.25rem;
}
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
  margin: 0.3125rem 0.625rem;
}
.demo1-item {
  width: 4.875rem;
  height: 1.875rem;
}
.demo1-item-selected {
  border: 1px solid #e60012;
}
.faType {
  display: flex;
  font-size: 12px;
}
.sendType p {
  color: #666666;
  font-size: 12px;
  padding-left: 10px;
  line-height: 20px;
}
.isOk {
  width: 70px;
  height: 40px;
  text-align: center;
  background: #e60012;
  color: #ffffff;
  line-height: 40px;
  margin-bottom: 20px;
  margin-left: 40%;
  margin-top: 20px;
}
.faTypea {
  margin-top: 20px;
}
.demo4-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
  margin-top: 8px;
}
.demo4-item-selected {
  background-color: #ff3b3b;
  color: #fff;
}
.payInfos {
  color: #666;
  text-align: right;
  padding: 0.625rem;
}
.payInfos span {
  font-size: 1.25rem;
  color: #ff3b3b;
}
.paygetbug {
  height: 2.5rem;
  border-bottom: 1px solid #ebebeb;
}
.aboutWx {
  padding-left: 0.625rem;
}
.mustchoose {
  width: 60px;
  height: 30px;
  background: #ff3b3b;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
}
/* .confirmWrap{
    margin-bottom: .625rem
} */
</style>










